<template>
    <div>
        <el-dialog v-model="dialogVisible" :title="title || '选择员工'" :width="610" 
            draggable align-center append-to-body :close-on-click-modal="false" :before-close="handleClose">
            <el-transfer ref="transferRef" v-model="values" :data="userList" filterable
                :titles="['选择员工', '已选择']" :props="transferProps"
                @leftCheckChange="leftChange" @rightCheckChange="rightChange">
                <template #right-footer>
                    <div class="flex space-between checked_info">
                        <div class="info">
                            <span>已选：</span>
                            <span>{{ checkedCount }}</span> 个员工
                        </div>
                        <div>
                            <el-button link type="primary" @click="clearChecked"> 清 空 </el-button>
                        </div>
                    </div>
                </template>
            </el-transfer>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel"> 取 消 </el-button>
                    <el-button type="primary" @click="confirm"> 确 定 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import { listUserV2 } from "@/api/system/user";
    const props = defineProps( [ 'show', 'defaultValue', 'options', 'disabledValues', 'title', 'type', 'multiple', 'max' ] ); // 接收传参
    const emit = defineEmits( [ 'update:show', 'confirm', 'cancel' ] ); // 回调注册
    const transferRef = ref(null);
    const dialogVisible = ref(false);
    const values = ref([]);
    const userList = ref([]);
    const checkedCount = ref(0);
    const transferProps = ref({
        key: 'userId',
        label: 'nickName'
    });
    watch(() => props.show, () => { 
        dialogVisible.value = props.show;
        if(props.show){
            if(props.type == 'ids'){
                values.value = JSON.parse(JSON.stringify(props.defaultValue)) || [];
                if(props.options){ // 手动模式 传入人员列表
                    userList.value = props.options;
                    userList.value.map(item => {
                        if(props.disabledValues && props.disabledValues.length){
                            props.disabledValues.map( cItem => {
                                if(item.userId == cItem) item.disabled = true
                            });
                        }
                    })
                    return
                }
                getUserList();
                return
            }
            props.defaultValue.map(item => {
                values.value.push(item.userId);
            });
            if(props.options){ // 手动模式 传入人员列表
                userList.value = props.options;
                userList.value.map(item => {
                    if(props.disabledValues && props.disabledValues.length){
                        props.disabledValues.map( cItem => {
                            if(item.userId == cItem) item.disabled = true
                        });
                    }
                })
                return
            }
            getUserList();
        }
    }); 
    watch(() => values.value, () => { 
        checkedCount.value = values.value.length;
    }, {deep: true}); 
    const clearChecked = () => {
        if(values.value.length <= 0) return
        values.value.splice(0, values.value.length);
    };
    const leftChange = (value) => {
        if(value.length > 1){
            values.value = value;
            return
        }
        values.value.push(value[0]);
        // 单选
        if(!props.multiple){
            userList.value.map( item => {
                values.value.map(cItem => {
                    if(item.userId == cItem) return
                    item.disabled = true;
                });
            })
        }
        // 最大值
        if(props.max && values.value.length >= props.max){
            userList.value.map( item => {
                item.disabled = true;
                values.value.map(cItem => {
                    if(item.userId == cItem) {
                        item.disabled = false;
                    }
                });
            })
        }
    }
    const rightChange = (value) => {
        if(value.length > 1){
            values.value = [];
            return
        }
        const index = values.value.findIndex(item => item == value[0])
        values.value.splice(index, 1);
        if(!props.multiple && values.value.length <= 0){
            userList.value.map( item => {
                item.disabled = false;
            })
        }
        if(props.max && values.value.length < props.max){
            userList.value.map( item => {
                item.disabled = false;
            })
        }
    };
    const getUserList = () => {
        listUserV2({}).then(res => {
            userList.value = res.data;
            userList.value.map(item => {
                if(props.disabledValues && props.disabledValues.length){
                    props.disabledValues.map( cItem => {
                        if(item.userId == cItem) item.disabled = true
                    });
                }
            })
        });
    }
    const confirm = () => {
        let selectUserItems = [];
        values.value.map( item => {
            userList.value.map(cItem => {
                if(item == cItem.userId){
                    selectUserItems.push(cItem);
                }
            });
        })
        emit('confirm', values.value, selectUserItems)
        handleClose();
    };
    const cancel = () => {
        handleClose()
    };
    const handleClose = () => {
        dialogVisible.value = false;
        emit('update:show', false);
        values.value = [];
    };
</script>
<style scoped lang="scss">
    :deep(.el-transfer-panel__header){
        display: none;
    }
    :deep(.el-transfer__buttons){
        display: none;
    }
    :deep(.el-transfer-panel){
        width: 280px;
    }
    :deep(.el-transfer-panel__filter){
        width: 250px;
    }
    :deep(.el-transfer-panel__body){
        border-top: 1px solid #EBEEF5;
        border-radius: 5px;
    }
    :deep(.el-transfer-panel__footer){
        height: 0;
        border-top: 0px;
        margin-top: -2px;
    }
    .checked_info{
        position: absolute;top: 1px;
        width: calc( 100% - 2px);
        background-color: #fff;
        padding: 0 10px;
        height: 65px;line-height: 65px;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        .info{
            color: #999;
            font-size: 13px;
        }
    }
</style>